<template>
  <div class="app-container">
    <div style="color:#999;margin-bottom:10px;font-size:12px">仅当交易类型单选"红利（包括加币-计入红利）"、"加币-不计红利"、"减币时，可选择细分类型"</div>
    <el-form :inline="true" :model="form" ref="refForm" class="demo-form-inline filter-container">
      <el-form-item prop="dateType">
        <el-select v-model="form.timeRangeType" placeholder="操作时间">
          <el-option label="操作时间" :value="1"></el-option>
          <el-option label="账变时间" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="time">
        <el-date-picker
          v-model="form.time"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="成功" :value="1"></el-option>
          <el-option label="失败" :value="2"></el-option>
          <el-option label="处理中" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账户名：" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="交易号：" prop="orderId">
        <el-input v-model="form.orderId"></el-input>
      </el-form-item>
      <el-form-item label="所属代理：" prop="parentName">
        <el-input v-model="form.parentName"></el-input>
      </el-form-item>
      <el-form-item label="交易类型：" prop="orderType">
        <el-select
          @change="handlechange"
          :collapse-tags="true"
          v-model="form.orderType" width="100%" multiple placeholder="请选择交易类型" @remove-tag="tagRemove" :style="{width: '250px'}">
          <el-option
            v-show="item.value !== -1"
            v-for="item in consts.ORDER_TYPE_DETAIL"
            :label="item.title"
            :key="item.value"
            :value="item.value"
            :disabled="form.orderType.length==1&&form.orderType[0]==item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="细分类型" prop="subType"  >
        <el-select :disabled="subMenu.length<1"
                   v-model="form.subType"
                   :collapse-tags="true"
                   width="100%" multiple placeholder="请选择细分类型">
          <el-option
            v-for="item in subMenu"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="账户类型" prop="userType">
        <el-select
          v-model="form.userType"
          placeholder="请选择账户类型"
        >
          <el-option
            v-for="item in payEnum.USER_TYPE"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="状态" prop="status" >
        <el-select
          :collapse-tags="true"
          v-model="form.status" width="100%"  placeholder="请选择状态">
          <el-option
            v-for="item in status"
            :label="item.lable"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-button type="primary" v-waves icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-download" @click="exportHandle">导出</el-button>
      <el-button @click="selfResetForm('refForm')">重置</el-button>
      <el-button @click="sortByEdit" icon="el-icon-caret-bottom">按操作时间排序</el-button>
      <el-button @click="sortByFinish" icon="el-icon-caret-bottom">按账变时间排序</el-button>
    </el-form>

    <el-table :data="tableData.list"
              v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">

      <el-table-column label="交易号" align="center" width="180" prop="orderId">
      </el-table-column>
      <el-table-column label="账户名" align="center">
        <template slot-scope="{row}">
          {{row.username}}
        </template>
      </el-table-column>
      <el-table-column label="账户类型" width="100" align="center">
        <template slot-scope="{row}">
          {{getLabel(row.userType, payEnum.USER_TYPE)}}
        </template>
      </el-table-column>
      <el-table-column label="所属代理" prop="parentName" align="center">
      </el-table-column>
      <el-table-column label="交易类型" align="center"  prop="orderType"  >
<!--        <template slot-scope="{row}" >-->
<!--          <span v-if="row.orderType!=14&&row.orderType!=13"> {{row.orderType | toConverter('ORDER_TYPE')}}</span>-->
<!--          <span v-else>加币（不计红利）</span>-->
<!--        </template>-->
        <template slot-scope="{row}" >
          <span v-if="row.orderType != 11">{{row.orderDesc}}</span>
          <span v-else>{{row.orderDesc}}操作</span>
        </template>
      </el-table-column>
      <el-table-column label="细分类型" align="center" prop="subType">
        <template slot-scope="{row}">
          {{row.subType || '-'}}
        </template>
      </el-table-column>
      <el-table-column label="操作动作" align="center" prop="remark">
      </el-table-column>
      <el-table-column label="操作时间" width="180" align="center" :sortable="isShowEdiit"  >
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="金额" align="center" prop="amount">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="手续费" align="center" prop="fee">
        <template slot-scope="{row}">
          {{row.fee | currency}}
        </template>
      </el-table-column>
      <el-table-column label="应到账" align="center" prop="reallyAmount">
        <template slot-scope="{row}">
          {{row.positiveNegative}}
          {{row.reallyAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="中心钱包账变前余额" align="center" prop="balanceBefore">
        <template slot-scope="{row}" >
          <span v-if="row.status==0 && row.orderType != 2">-</span>
          <span v-else>{{row.balanceBefore | currency}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="{row}">
          <span :class="{'gren': row.status==1,'oran': row.status==0,'greey': row.status==2}">
            {{row.status | toConverter('REPORT_TRANSFER_STATUS')}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="中心钱包账变后余额" align="center" prop="balance">
        <template slot-scope="{row}">
          <span v-if="row.status==0 && row.orderType != 2">-</span>
          <span v-else>{{row.balance | currency}}</span>
        </template>
      </el-table-column>
      <el-table-column label="账变时间" width="180" align="center" :sortable="isShowFinish">
        <template slot-scope="{row}">
          {{row.finishTime | toTime}}
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  form, grid, dialog, handleDownload, constsLabel,
} from '@/build';

import { getMemberTradeList, exportMemberTradeList } from '@/services/api/member';

export default {
  name: 'report-transaction',
  mixins: [form, grid, dialog, handleDownload, constsLabel],
  data() {
    const allOrderType = [];
    consts.ORDER_TYPE_DETAIL.map((item) => {
      if (item.value != -1) {
        allOrderType.push(item.value);
      }
    });
    return {
      // status: [
      //   { lable: '全部', value: '' },
      //   { lable: '失败', value: 0 },
      //   { lable: '成功', value: 1 },
      // ],
      type: null,
      isShowEdiit: true,
      isShowFinish: false,
      tableData: {
        list: [],
        total: 0,
      },
      tmpOrderType: [],
      form: {
        timeRangeType: 1,
        time: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
        dateType: undefined,
        status: undefined,
        username: undefined,
        orderId: undefined,
        parentName: undefined,
        orderType: allOrderType,
        sortStr: 'desc',
        // status: '', // 状态
        subType: [], // 细分类型
        userType: -1,
      },
      subMenu: [],
      filters: {
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        dateType: undefined,
        page: 1,
        size: 20,
        orderType: allOrderType,
        export: undefined,
        status: undefined,
        username: undefined,
        timeRangeType: 1,
        sortStr: undefined,
        orderBy: undefined,
        userType: -1,
      },
      filterDateType: false,
      positiveType: [1, 14, 6, 4, 5, 11, 9],
      negativeType: [10, 2, 13, 15],
    };
  },
  filters: {
    toSwitchStr(type) {
      let str = ';';
      // eslint-disable-next-line default-case
      switch (type) {
        case 12:
          str = '首充红利';
          break;
        case 13:
          str = '真人连赢红利';
          break;
        case 14:
          str = '体育闯关红利';
          break;
        case 15:
          str = '老虎机救援红利';
          break;
        case 16:
          str = '真人闯关红利';
          break;
        case 17:
          str = '春节活动-砸金蛋红利';
          break;
        case 18:
          str = '春节活动-体育充提红利';
          break;
        case 19:
          str = '春节活动-红包雨红利';
          break;
        case 3:
          str = '人工充值';
          break;
        case 4:
          str = '提现失败退回';
          break;
        case 5:
          str = '转账补分';
          break;
        case 6:
          str = '游戏补分-贝博体育';
          break;
        case 7:
          str = '游戏补分-LB彩票';
          break;
        case 8:
          str = '上分返利';
          break;
        case 9:
          str = '佣金调整';
          break;
        case 10:
          str = '系统扣回';
          break;
        case 11:
          str = '错误上分扣回';
          break;
        default:
          str = '-';
      }
      return str;
    },
  },
  watch: {
    type(newVal) {
      this.form.childType = [];
    },
    form: {
      handler(newVal) {
        this.subMenu = [];
        this.type = undefined;
        if (newVal.orderType.length == 1) {
          this.type = newVal.orderType[0];
          if (this.type == 4) { // 红利（包括加币-计入红利）
            this.subMenu = consts.ORDER_TYPE_DETAIL[4].children;
          } else if (this.type == 14) { // 加币（不计红利）
            this.subMenu = consts.ORDER_TYPE_DETAIL[6].children;
          } else if (this.type == 10) { // 减币
            this.subMenu = consts.ORDER_TYPE_DETAIL[10].children;
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    handlechange() {
      this.form.subType = [];
    },
    sortByEdit() {
      this.isShowEdiit = true;
      this.isShowFinish = false;
      this.filters.orderBy = undefined;
      // this.filters.sortStr='asc'
      this.doGet({ action: 'getGrid' });
    },
    sortByFinish() {
      this.isShowEdiit = false;
      this.isShowFinish = true;
      this.filters.orderBy = 'finishTime';
      // this.filters.sortStr='asc'
      this.doGet({ action: 'getGrid' });
    },
    submitFilterForm() {
      const {
        time, username, orderId, parentName, orderType, status, timeRangeType, subType, userType,
      } = this.form;
      let startTime; let
        endTime;
      if (!_.isUndefined(time) && _.isArray(time)) {
        startTime = time[0];
        endTime = time[1];
      }
      this.filters = {
        ...this.filters, username, orderId, parentName, orderType, startTime, endTime, status, timeRangeType, subType, userType,
      };
      this.gridSearch();
    },
    // 导出
    exportHandle() {
      const { username, parentName } = this.form;
      const {
        startTime, endTime, orderType, page, size,
      } = this.filters;
      const ajaxData = {
        startTime, endTime, username, parentName, orderType: orderType.join(','), page, size,
      };
      const filename = '交易明细报表.csv';
      const header = ['交易号', '账户名', '账户类型', '所属代理', '交易类型', '细分类型', '操作动作', '操作时间', '金额', '手续费', '应到账', '中心钱包账变前余额', '状态', '中心钱包账变后余额', '账变时间'];
      const filterField = ['orderId', 'username', 'userType', 'parentName', 'orderType', 'subType', 'remark', 'createTime', 'amount', 'fee', 'reallyAmount', 'balanceBefore', 'status', 'balance', 'finishTime'];
      exportMemberTradeList(ajaxData).then(([result, data]) => {
        if (result) {
          const exportData = this.responseFormatter(data.list);
          this.export2Excel(header, filterField, exportData, filename);
        } else {
          this.$message({ message: `导出失败,${data.message}`, type: 'warning' });
        }
      });
    },
    // 格式化导出数据
    responseFormatter(data) {
      data.map((item) => {
        item.userType = _.toConverter(item.userType, 'ACCOUNT_TYPE');
        if (item.orderType != 13 && item.orderType != 14) {
          item.orderType = _.toConverter(item.orderType, 'ORDER_TYPE_DETAIL');
        } else {
          item.orderType = '加币（不计红利）';
        }

        item.status = _.toConverter(item.status, 'REPORT_TRANSFER_STATUS');
        // item.subType = this.$options.filters.toSwitchStr(item.subType);
        item.subType = item.subType;
        item.amount = _.currency(item.amount);
        item.fee = _.currency(item.fee);
        item.balance = _.currency(item.balance);
        item.balanceBefore = _.currency(item.balanceBefore);
        item.finishTime = _.toTime(item.finishTime);
        item.createTime = _.toTime(item.createTime);
      });

      return data;
    },

    selfResetForm(formName) {
      this.filters.orderBy = undefined;
      this.filters.sortStr = undefined;
      this.resetForm(formName);
      this.submitFilterForm();
    },
    tagRemove(tag) {
      if (this.form.orderType.length) this.tmpOrderType = _.cloneDeep(this.form.orderType);
      if (this.form.orderType.length <= 1) {
        this.form.orderType = this.tmpOrderType;
      }
    },
    toOrderStr(orderType) {
      const obj = _.filter(consts.ORDER_TYPE_DETAIL, item => item.value === orderType);
      return obj.length > 0 ? obj[0].title : '-';
    },
  },

  mounted() {
    this.bindGet(getMemberTradeList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      format: (data) => {
        data.list = data.list.map((item) => {
          // item.amount = Math.abs(item.amount);
          // item.reallyAmount = Math.abs(item.reallyAmount);
          if (item.reallyAmount <= 0) {
            item.positiveNegative = '';
            return item;
          }
          if (item.orderType === 3) {
            item.positiveNegative = item.transferType === 'toCeneter' ? '+' : '-';
          } else if (this.positiveType.indexOf(item.orderType) > -1) {
            item.positiveNegative = '+';
          } else if (this.negativeType.indexOf(item.orderType) > -1) {
            item.positiveNegative = '-';
          }
          return item;
        });
        return data;
      },
    });

    this.getAll();
  },
};
</script>


<style  scoped>
  .gren{
    color: rgb(0, 255,0)
  }
  .oran{
    color: rgb(255, 150,0)
  }
  .greey{
    color: rgb(255, 0,0)
  }
</style>
